/* 全局样式设置 */
* {
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}

/*加上这段代码后，就不会出现缩小浏览器窗口，出现横向滚动条后，top 元素无法覆盖屏幕区域外的部分的问题	*/
html, body {
	min-width: 1200px;
	max-width: 100%;
}

a:link, a:visited {
	text-decoration: none;
}

ul {
	list-style-type: none;
}

/* 网站头部设置 */

.top {
	min-width: 1200px;
	max-width: 100%;
	background: #333;
	height: 30px;
}

.top-content {
	width: 1200px;
	margin: 0 auto;
}

.top-content ul {
	list-style: none;
	line-height: 30px;
	text-align: right;
}

.top-content ul li {
	display: inline-block;
	width: 70px;
}

.top-content a:link, .top-content a:visited {
	color: #C5C5C5;
}

.top-content a:hover, .top-content a:active {
	color: #fff;
	text-decoration: none;
}

/* 购物车区域 */
.logo-cart {
	padding-top: 10px;
	width: 1200px;
	margin: 0 auto;	/* border: 1px solid red; */
}

.logo {
	width: 250px;
	float: left;
}

.cart {
	width: 200px;
	height: 32px;	/* border: 1px solid black; */
	float: right;
	margin-top: 30px;
	position: relative;
}

.cart-header {
	text-decoration: none;	
}

.cart-img {
	padding: 8px;
	font-size: 16px;
	background-color: #ef5d5d;
	color: #fff;
	line-height: 32px;
	vertical-align: middle;
	margin-right: 10px;
}

.cart-info {
	font-weight: 700;
	color: #020202;
	font-size: 12px
}

/* 购物车样式 */
#cart:hover .cart-content {
	display: block;
}

#cart #cart-total:after {
	font-family: 'FontAwesome';
	content: "\f078";
	margin-left: 10px;
}

#cart .cart-content {
	position: absolute;
	background: #fff;
	display: none;
	margin: 0;
	padding: 20px;
	right: 0;
	left: auto;
	min-width: 300px;
	border: 1px solid #f1f1f1;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	border-radius: 0;
	z-index: 999;
}

#cart .cart-content a {
	color: #000;
}
/* 表格样式 */
table{
	width: 90%;
	height: auto;
	margin: 10px auto;
	
	border-collapse: collapse;
}
table,td,th{
	border: 1px solid rgba(0,0,0,.2);
	padding: 5px;
}
.todo{
	text-align: right;
}
/* 清除浮动 */
.clearfix::before, .clearfix::after {
	content: "020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* 导航区域 */
.nav {
	min-width: 1200px;
	max-width: 100%;
	height: 40px;
	background-color: #ECECEC
}

.nav-content {
	width: 1200px;
	margin: 0 auto;	/* border: 1px solid red; */
	height: 100%;
}

.nav-menu {
	width: 600px;
	float: left;
}

.pattern {
	/* border: 1px solid red; */
	float: left;
	width: 100px;
	list-style-type: none;
	text-align: center;
	line-height: 40px;
	position: relative;
}

.pattern>a {
	position: relative;
	display: inline-block;
}
/* 导航栏上的搜索区域样式 */
.nav-search {	
	float: right;	/* border: 1px solid black; */
	margin-top: 6px;
}

.nav-menu a {
	font-size: 14px;
}

.nav-menu a:link, .nav-menu a:visited {
	color: #555;
	text-decoration: none;
}

.pattern>a:hover, .pattern>a:active {
	color: #ef5d5d;
	text-decoration: none;
}
/* 为拥有二级菜单的菜单添加样式 */
.width-sub-menu>a::after {
	content: '\f0d7';
	font-family: FontAwesome;
	display: block;
	width: 0px;
	height: 0px;
	position: absolute;
	top: 0;
	right: 0px;
	color: #555;
}
/* 二级菜单样式 */
.sub-menu {
	position: absolute;
	top: 80px;
	left: 0;
	z-index: 999;
	background: #fff;
	display: none;
	padding: 10px 5px 10px 5px;
	text-align: left;
}

.sub-menu li {
	width: 300px;
	list-style-type: none;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	line-height: 25px;
}

.sub-menu li a {
	width: 100%;
	color: #555;
}

.nav-search .search-box {
	
	background: #fff;
	height: 26px;
	padding-right: 10px;
	line-height: 26px;

	/* border: 1px solid rgba(0, 0, 0, .1); */
}
/* 搜索框样式 */
.nav-search .search-box .search-text {
	
	height: 20px;
	width: 180px;
	border: none;
	padding-top: 5px;
	outline: none;
	padding-left: 10px;
	vertical-align: top;
}
/* 搜索按钮样式 */
.nav-search .search-box button {
/* 确保不会出现背景颜色溢出 */
	background: transparent; 
	font-size: 20px;
	color: red;
	border: none;
	padding:0;	
}


/* 回到顶部 */
.scroll-top {
	display: none;
	background-color: #ef5d5d;
	position: fixed;
	bottom: 80px;
	right: 10px;
	width: 40px;
	height: 40px;
	text-align: center;
	font-size: 12px;
	color: #fff !important;
	padding: 2px;
	z-index: 9999;
	border-radius: 2px;
}

.scroll-top:hover {
	text-decoration: none;
	background: #000;
}


